<template>
    <div class="table-form-page">
        <div class="form-page-header">
            <div>
                <el-page-header @back="closeWindow" content="新增经营活动" />
            </div>
            <div>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </div>
        <div class="form-content">
            <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                <col class="label-col" />
                <col class="content-col" />
                <col class="label-col" />
                <col class="content-col" />
                <tr class="tr-class">
                    <td class="tab-class" colspan="4">经营活动信息</td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目名称</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input
                            v-model="form.projectName"
                            class="form-input-class"
                            placeholder="请输入项目名称"
                            @click.native="chooseProject"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">部门名称</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.departmentName"
                            class="form-input-class"
                            placeholder="请输入部门名称"
                            @click.native="chooseDepartment"
                        />
                    </td>
                    <td class="td-class label-class">填写人</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.creator" class="form-input-class" placeholder="请输入填写人" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">本周经营活动拜访记录</td>
                    <td class="td-class" colspan="3">
                        <el-input
                            v-model="form.visitPlan"
                            type="textarea"
                            :rows="4"
                            class="form-input-class"
                            placeholder="请输入本周经营活动拜访记录"
                            style="width: 100%"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">本周经营活动执行情况</td>
                    <td class="td-class" colspan="3">
                        <el-input
                            v-model="form.implementation"
                            type="textarea"
                            :rows="4"
                            class="form-input-class"
                            placeholder="请输入本周经营活动执行情况"
                            style="width: 100%"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">未完成说明</td>
                    <td class="td-class" colspan="3">
                        <el-input
                            v-model="form.incompleteDesc"
                            type="textarea"
                            :rows="4"
                            class="form-input-class"
                            placeholder="请输入未完成说明"
                            style="width: 100%"
                        />
                    </td>
                </tr>
            </table>
        </div>
        <!-- 项目弹框 -->
        <el-dialog
            title="选择项目"
            v-model="showProjectGridCpt"
            width="80%"
            :lock-scroll="true"
            :close-on-click-modal="false"
            destroy-on-close
        >
            <ProjectGridCpt v-if="showProjectGridCpt" @select="projectSelected"></ProjectGridCpt>
        </el-dialog>
        <!-- 部门弹框 -->
        <el-dialog
            title="选择部门"
            v-model="showDepartment"
            width="400px"
            :lock-scroll="true"
            :close-on-click-modal="false"
            destroy-on-close
        >
            <div class="tree-dialog-content">
                <department-tree v-if="showDepartment" @select="departmentSelected"></department-tree>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import ProjectGridCpt from '@/components/pub/ProjectGridCpt.vue'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import http from '@/http.js'

const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['close'])

onMounted(() => {
    if (props.id !== '') {
        loadDetail()
    } else {
        form.creator = localStorage.getItem('employeeName')
    }
})

const form = reactive({
    id: '',
    projectId: '',
    projectCode: '',
    projectName: '',
    departmentId: '',
    departmentCode: '',
    departmentName: '',
    creator: '',
    visitPlan: '',
    implementation: '',
    incompleteDesc: ''
})

const loadDetail = () => {
    http.fetchForm({
        url: '/jingying/activity/plan/findById',
        method: 'get',
        data: {
            id: props.id
        }
    }).then((res) => {
        let data = res.data
        Object.assign(form, data)
    })
}

const onSubmit = () => {
    let params = JSON.parse(JSON.stringify(form))
    http.fetchJson({
        url: '/jingying/activity/plan/save',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        closeWindow()
    })
}

const closeWindow = () => {
    emit('close')
}

const showProjectGridCpt = ref(false)

const chooseProject = () => {
    showProjectGridCpt.value = true
}

const projectSelected = (res) => {
    form.projectId = res[0].id
    form.projectCode = res[0].code
    form.projectName = res[0].name
    showProjectGridCpt.value = false
}

const showDepartment = ref(false)

const chooseDepartment = () => {
    showDepartment.value = true
}

const departmentSelected = (res) => {
    form.departmentId = res.id
    form.departmentCode = res.code
    form.departmentName = res.label
    showDepartment.value = false
}
</script>
<style scoped>
@import '@/assets/css/table-form.css';
</style>
